<template>
  <transition>
  <div class="app-glass-order">
    <mt-header title="订单管理">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <section class="app-main">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">全部订单</mt-tab-item>
        <mt-tab-item id="2">进行中</mt-tab-item>
        <mt-tab-item id="3">已取消</mt-tab-item>
        <mt-tab-item id="4">已完成</mt-tab-item>
      </mt-navbar>

      <!-- tab-container -->
      <mt-tab-container v-model="selected" swipeable>
        <mt-tab-container-item id="1">
          <mt-cell v-for="n in 10" :title="'content ' + n" />
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <mt-cell v-for="n in 4" :title="'content ' + n" />
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
        <mt-cell v-for="n in 6" :title="'content ' + n" />
      </mt-tab-container-item>

        <mt-tab-container-item id="4">
          <mt-cell v-for="n in 6" :title="'content ' + n" />
        </mt-tab-container-item>
      </mt-tab-container>
    </section>
  </div>
    </transition>
</template>

<script>
  import { Header,Navbar, TabItem,TabContainer, TabContainerItem } from 'mint-ui';

//  Vue.component(Header.name, Header);
export default {
  components:{
    Header,
    TabContainer,
    TabContainerItem
  },
  data () {
    return {
      selected:'1',
    }
  },
  mounted(){
  }
}
</script>

<style>
  .app-glass-order .mint-tab-item-label{
    font-size:16px;
  }
  .mint-navbar .mint-tab-item{
    padding:16px 0;
  }
  .mint-navbar .mint-tab-item.is-selected{
    color:#c34853;
    border-bottom:2px solid #c34853;
  }
  .mint-tab-container{
    padding:12px 12px 0;
  }
</style>
